<article>
    <div class="module-address-verification">
        <h3 class="ui-title">{{ $t('certification.verifyTitle') }}</h3>
        <help help-type="infoGray">
            <div slot="comp-help-content" class="comp-help-content">
                <div class="title">{{ $t('certification.verify.address.tipTitle') }}</div>
                <div class="text">{{ $tc('certification.verify.address.tip', 0) }}</div>
                <div class="text">{{ $tc('certification.verify.address.tip', 1) }}
                    <a href="javascript:;" @click="changeUnsupportCountry" style="text-decoration:underline">{{ $t('certification.verify.address.tipLink') }}</a></div>
            </div>
        </help>

        <unsupported-countries v-if="showUnsupportedCountries" v-on:showflag="changeUnsupportCountry">
        </unsupported-countries>

        <div class="form-box">
            <h3 class="ui-title ui-sub-title">{{ $t('certification.verify.address.verifyTitle') }}</h3>
            <validator :rules="rules">
                <form class="m-form-page" name="form" action="javascript:;">
                    <div class="col-row">
                        <div class="col-label">
                            <label class="required">*</label><label for="city">{{ $t('certification.verify.address.cityTown') }}:</label>
                        </div>
                        <div class="col-input">
                            <input type="text"
                                   id="city"
                                   class="fn-block"
                                   name="city"
                                   maxlength="100"
                                   autocomplete="off"
                                   :placeholder="$t('certification.verify.address.cityTown')"
                                   v-model="form.city">
                            <div class="ui-tip"></div>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label class="required">*</label><label for="address">{{ $t('certification.verify.address.address') }}:</label>
                        </div>
                        <div class="col-input">
                            <input type="text"
                                   id="address"
                                   class="fn-block"
                                   autocomplete="off"
                                   name="address"
                                   :placeholder="$t('certification.verify.address.address')"
                                   maxlength="200"
                                   v-model="form.address">
                            <div class="ui-tip"></div>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label class="required">*</label><label for="postcode">{{ $t('certification.verify.address.postalZipCode') }}:</label>
                        </div>
                        <div class="col-input">
                            <input type="text"
                                   id="postcode"
                                   class="fn-block"
                                   autocomplete="off"
                                   name="postcode"
                                   :placeholder="$t('certification.verify.address.postalZipCode')"
                                   v-model="form.postcode">
                            <div class="ui-tip"></div>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label class="required">*</label><label>{{ $t('certification.verify.address.proof') }}:</label>
                        </div>
                        <div class="col-input">
                            <div class="file-container">
                                <file-upload class="my-file-uploader"
                                             name="residencePhoto"
                                             id="residencePhoto"
                                             action="/exchangeApi/common/upload-photo/private"
                                             v-on:onFileClick="onFileClick"
                                             v-on:deleteFile="deleteFile"
                                             v-on:onFileUpload="onFileUpload">↑{{ $t('common.upload') }}
                                </file-upload>
                                <div class="ui-tip" v-if="residencePhotoTip">{{ $t('common.uploadTip') }}</div>
                            </div>
                            <p class="col-p">{{ $t('certification.verify.address.uploadTip1') }}</p>
                            <p class="col-p">{{ $t('certification.verify.address.uploadTip2') }}</p>
                            <p class="col-p">{{ $t('certification.verify.address.uploadTip3') }}</p>
                            <p class="col-p">{{ $t('certification.verify.address.uploadTip4') }}</p>
                            <p class="col-p">{{ $t('certification.verify.address.uploadTip5') }}</p>
                        </div>
                    </div>

                    <div class="col-row">
                        <div class="col-label">
                            <label>{{ $t('certification.verify.address.residentialPermit') }}:</label>
                        </div>
                        <div class="col-input">
                            <div class="file-container">
                                <file-upload class="my-file-uploader"
                                             name="residenceTranslate"
                                             id="residenceTranslate"
                                             action="/exchangeApi/common/upload-photo/private"
                                             multiple
                                             v-on:deleteFile="deleteFile"
                                             v-on:onFileUpload="onFileUpload">↑{{ $t('common.upload') }}
                                </file-upload>
                            </div>
                            <p class="col-p">{{ $t('certification.verify.address.permitTip1') }}</p>
                            <p class="col-p">{{ $t('certification.verify.address.permitTip2') }}</p>
                            <p class="col-p">{{ $t('certification.verify.address.permitTip3') }}</p>
                        </div>
                    </div>

                    <div class="col-row">
                        <div class="col-label">&nbsp;</div>
                        <div class="col-input col-check">
                            <label>
                                <input type="checkbox"
                                       class="check-left"
                                       id="agree"
                                       name="agree"
                                       @change="changeAgree">
                                <p class="col-p check-right">{{ $tc('certification.verify.address.promiseTip', 1) }}</p>
                                <p class="col-p check-right">{{ $tc('certification.verify.address.promiseTip', 2) }}</p>
                            </label>
                        </div>
                    </div>

                    <div class="col-row col-row--btns">
                        <div class="col-label">
                            <label>&nbsp;</label>
                        </div>
                        <div class="col-text">
                            <button type="submit"
                                    class="ui-btn ui-btn--block"
                                    v-if="isRequesting === false"
                                    :disabled='!form.agree'
                                    @click="submit()">{{ $t('common.confirm') }}
                            </button>
                            <button type="submit"
                                    class="ui-btn  ui-btn--block"
                                    disabled
                                    v-if="isRequesting === true">{{ $t('common.waiting') }}...
                            </button>
                        </div>
                    </div>
                </form>
            </validator>
        </div>


    </div>
</article>